<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶式效果</title>
		<style type="text/css">
			body{
				height: 40000px;
			}
			.search{
				width: 580px;
				border: 1px solid red;
				border-radius: 15px;
				height: 30px;
				font-size: 20px;
				
			}
			#st{
				/* margin: 0 auto; */
				text-align: center;
				position: fixed;
				left: 50px;
			}
		</style>
		<script>
			//移动位置,改变position
			//滚动事件发生的时候
			window.onscroll=function(){
				//console.log("xxxxx");
				var d=document.documentElement.scrollTop;
				console.log("滚动了"+d);
				//如果滚动的高度超过st上面的高度,设置固定fixed
				var h=document.getElementById("st").offsetTop;
				//console.log(h);
				let st=document.getElementById("st");
				if(d>h+30){
					st.style.position="fixed";
					st.style.top="3px";
				}else{
					st.style.position="static";
					st.style.left="50px";
				}
				
			}
		</script>
	</head>
	<body>
		<div id="nav" style="height:120px;background-color: blue;"></div>
		<div id="st">
			<input type="search" name="wd" class="search"/>
		</div>
	</body>
</html>
